<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>test1</title>
	
	<style type="text/css">
		.myArea {
			width: 100%;
			height: 80px;
		}

		.myDiv {
			line-height: 30px;
		}
	</style>

</head>

<body>
	<h2>工作经历</h2><hr />
	<div id="myContainer">
		<div class="myDiv" id="div1">
			公司名称:<input type="text" />
			职位:<input type="text" />
			<a href="#" onclick="deleterows()">删除工作经历</a><br />
			工作职责及工作内容描述:<textarea class="myArea"></textarea><hr />
		</div>
	</div>

	<div style="line-height: 30px; text-align: right;">
		<a href="#" onclick="addrows()">添加工作经历</a>
	</div>
	<script type="text/javascript">
		var div = document.querySelector("#myContainer");
		var divArr = document.querySelector("#myContainer").childNodes;
		var length = divArr.length;

		function addrows() {
			var textArr = document.querySelectorAll("input");
			var text = textArr[0].value;
			var text1 = textArr[1].value;
			var text2 = document.querySelector(".myArea").value;
			var div = document.querySelector("#myContainer");
			var divDiv = document.createElement("div");
			divDiv.innerHTML = "公司名称:" + text + "<br/>" + "职位:" + text1 + "<br/>" + "工作职责及工作内容描述:" + text2 + "<br/><hr>";
			div.appendChild(divDiv);
			textArr[0].value = ""; textArr[1].value = ""; document.querySelector(".myArea").value = "";
			length++;

		}

		function deleterows() {
			if (length >= 3) {
				div.removeChild(divArr[--length]);
			}
		}
	</script>
</body>

</html>